<template>
  <div class="container">
    {{ count }}
    <!-- <span v-for="(item, i) in data" :key="i">
      <input type="checkbox" v-model="item.selected" :id="i">
      <label :for="i">{{ item.value }}</label>
    </span>
    <div>选中的元素总和为: {{ total }}</div> -->
  </div>
</template>

<script>
export default {
  name: 'SelectedElements',
  // props: ['count', 'price'],
  props: {
    // // 直接写类型
    // price: String,
    // 类型+默认值
    count: {
      type: Number,
      default: 2,
    },
    list: Array,
  },
  data () {
    return {
      data: [],
    };
  },
  computed: {
    total () {
      return this.data.reduce((sum, c) => (c.selected ? sum + c.value : sum), 0);
    }
  },
  mounted () {
    this.data = new Array(this.count).fill(0).map(() => ({
      value: Math.floor(Math.random() * 100),
      selected: false,
    }));
  },
}
</script>

<style scoped>
label {
  background: red;
}

</style>